@function getRemNum($rem) {
    @return ($rem /37.5)
}

header {
    width: getRemNum(315rem);
    height: getRemNum(165rem);
    margin: getRemNum(24rem) auto 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .logo {
        width: getRemNum(97rem);
        height: getRemNum(43rem);
        background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/SHOW%403x.png") no-repeat;
        background-size: contain;
    }
    &>section:nth-child(2) {
        font-size: getRemNum(42rem);
        color: #333;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        margin-top: getRemNum(12rem);
    }
    &>section:nth-child(3) {
        font-size: getRemNum(20rem);
        color: #999999;
        font-family: PingFangSC-Medium, PingFang SC;
    }
}

.container {
    width: getRemNum(315rem);
    margin: 0 auto;
    &>section {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: getRemNum(44rem);
        font-size: getRemNum(14rem);
        input::-webkit-input-placeholder {
            color: #D8D8D8;
            letter-spacing: getRemNum(0.6rem);
        }
    }
    &>section section:nth-child(1) {
        width: getRemNum(38rem);
        height: getRemNum(48rem);
        background-size: contain !important;
    }
    &>section section:nth-child(2):not(.verification-code-input) {
        width: getRemNum(259rem);
        height: getRemNum(52rem);
        input {
            font-family: PingFangSC-Regular, PingFang SC;
            height: getRemNum(52rem);
            width: getRemNum(259rem);
            color: #757575;
            outline: none;
            border: {
                top: none;
                left: none;
                right: none;
                bottom: rgba(0, 0, 0, 0.05) solid getRemNum(2rem);
            }
        }
    }
    .verification-code-input {
        width: getRemNum(259rem);
        height: getRemNum(52rem);
        input {
            text-align: center;
            font-family: PingFangSC-Regular, PingFang SC;
            height: getRemNum(52rem);
            width: getRemNum(60rem);
            color: #757575;
            outline: none;
            border: {
                top: none;
                left: none;
                right: none;
                bottom: rgba(0, 0, 0, 0.05) solid getRemNum(2rem);
            }
        }
    }
    .phone-number {
        position: relative;
    }
    .phone-number-tip {
        position: absolute;
        background: linear-gradient(135deg, #4279FD 0%, #89B1FF 100%);
        width: getRemNum(78rem);
        height: getRemNum(44rem);
        right: 0;
        top: 50%;
        transform: translate(0, -50%);
        border-radius: getRemNum(12rem);
        color: #fff;
        font-family: PingFangSC-Medium, PingFang SC;
        text-align: center;
        line-height: getRemNum(44rem);
        font-size: getRemNum(12rem);
    }
    &>section:nth-child(1) section:nth-child(1) {
        background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/Phone%403x.png") no-repeat;
    }
    &>section:nth-child(2) section:nth-child(1) {
        background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/password%403x.png") no-repeat;
    }
    &>section:nth-child(3) section:nth-child(1) {
        background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/Account%403x.png") no-repeat;
    }
    &>section:nth-child(4) section:nth-child(1) {
        background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/password%403x.png") no-repeat;
    }
    &>section:nth-child(5) section:nth-child(1) {
        background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/Name%403x.png") no-repeat;
    }
    &>section:nth-child(6) section:nth-child(1) {
        background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/Stu%403x.png") no-repeat;
    }
}

footer {
    height: getRemNum(154rem);
    width: getRemNum(315rem);
    margin: getRemNum(44rem) auto getRemNum(57rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .submit-button {
        width: getRemNum(315rem);
        height: getRemNum(58rem);
        input {
            width: getRemNum(315rem);
            height: getRemNum(58rem);
            background-color: #FFC542;
            box-shadow: 0 getRemNum(5rem) getRemNum(12rem) 0 rgba(0, 0, 0, 0.08);
            border-radius: getRemNum(12rem);
            border: none;
            color: #fff;
            font-size: getRemNum(16rem);
            font-family: PingFangSC-Medium, PingFang SC;
        }
    }
    .other-login-operation {
        display: flex;
        justify-content: space-between;
        input {
            width: getRemNum(142rem);
            height: getRemNum(58rem);
            box-shadow: 0 getRemNum(5rem) getRemNum(12rem) 0 rgba(0, 0, 0, 0.08);
            border-radius: getRemNum(12rem);
            border: none;
            color: #fff;
            font-family: PingFangSC-Medium, PingFang SC;
            font-size: getRemNum(16rem);
        }
        & a:nth-child(1) input {
            background: linear-gradient(135deg, #4279FD 0%, #89B1FF 100%);
        }
        & a:nth-child(2) input {
            background: #3FDA9B;
        }
    }
}